<template>
	<div class="u-page">
		<div class="aui-flex u-mt-10">
			<div class="aui-flex-goods">
				<img :src="goods.goodsImages.split(',')[0]" alt="">
			</div>
			<div class="aui-flex-box">
				<div class="goods-title">
					{{OrdersData.goodsName?OrdersData.goodsName:''}}
				</div>
				<div class="u-fz-13 u-pt-5" style="color: #9f9d9e;">{{OrdersData.specification?OrdersData.specification:''}}</div>
				<div class="u-pt-10">
					<u-tag text="商品团购" color="#dc6e00" border-color="#dc6e00" bg-color="#ffffff" size="mini" mode="light" />
				</div>
			</div>
		</div>
		<div class="textarea-block u-mt-30">
			<u-input
				type="textarea"
				placeholder="写出你的感受，可以帮助其他小伙伴哦～"
				maxlength="500"
				height="300"
				:autoHeight="false"
				v-model="evaluationContent"
			></u-input>
		</div>
		<div class="pictrues-box u-mt-15">
			<Upload u_appid="ProductPromote" :u_fieldName="UserInfo.userId" :u_orunid="recordId"
				u_type="2" :u_initialAttchments="SubmitResultsFiles"
				@receiveAttachmentsData="getResultsFiles"></Upload>
		</div>
		<div style="height: 80rpx;"></div>
			
		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-10 u-pb-30" style="width: 90%;margin: 0 auto;height: 80px;">
				<u-button type="success" :custom-style="customStyle" :disabled="Requesting" @click="submit">
					提交
				</u-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
		UserInfo: {},
		recordId: '',
		OrdersData: {},
		goods: {},
		SubmitResultsFiles: [],
		evaluationContent: '',
		customStyle: {
			background: '#e55e97 !important'
		},
		Requesting: false//接口请求中标志
	}
  },

  mounted() {

  },

  onShow() {
  },

  onLoad(options) {
	  // 未登录跳转到登录页面
	  let loginRes = this.checkLogin(1);
	  if (!loginRes) {
	  	return false;
	  }
	  this.UserInfo = uni.getStorageSync('userInfo')
	  if(this.isNotNull(options.recordId)){
		  this.recordId = options.recordId
	  	  // 获取领取记录(订单)详情
	  	  this.getRecordDetails(options.recordId)
	  }else{
		  this.showMSG('error','出错啦！')
		  setTimeout(() => {
		  	  this.goBack()
		  }, 2000)
	  }
  },

  methods: {
	  
	  /**
	   * 获取订单详情
	   */
	  async getRecordDetails(recordId){
	  	let result = await this.$u.api.unifyMiniRest({
	  		systemid: "meily",
	  		url: "/buying/getOrderDetails",
	  		recordId: recordId,
	  		loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if(result.code == 200){
	  		this.OrdersData = result.data;
			this.getGoodsDetails(this.OrdersData.goodsId, this.OrdersData.goodsNo)
	  	} else {
	  		this.showMSG("error", "出错啦");
	  		setTimeout(() => {
	  			this.goBack()
	  		}, 2500)
	  	}
	  },
	  
	  /**
	   * 获取商品详情
	   */
	  async getGoodsDetails(goodsId, goodsNo) {
	  	let result = await this.$u.api.unifyMiniRestGet({
	  		systemid: "meily",
	  		url: "/goods/get/" + goodsNo + "/" + goodsId,
	  	});
	  	if (result.code == 200) {
	  		this.goods = result.data; // 商品信息
		}else{
			this.showMSG("error", "出错啦");
		}
	  },
	  
	  /** 
	   * 提交反馈
	   */
	  async submit(){
		if(!this.isNotNull(this.evaluationContent)){
			this.showMSG('none','请填写评价内容！')
			return
		}
		this.Requesting = true
		let evaluationPictures = ''
		for(const i in this.SubmitResultsFiles){
			if(evaluationPictures == ''){
				evaluationPictures = this.SubmitResultsFiles[i].url
			}else{
				evaluationPictures += "," + this.SubmitResultsFiles[i].url
			}
		}
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/buying/evaluation",
			id: this.recordId,
			evaluationContent: this.evaluationContent,
			evaluationPictures: evaluationPictures,
			loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if (result.code == 200) {
			this.showMSG("success", "已发表");
			setTimeout(() => {
				uni.$emit("finishOrder", this.recordId);
				this.goBack()
			}, 2500)
		}else{
			this.showMSG('error','出错啦')
			this.Requesting = false
		}
	  },
	  
	  /**
	   * 接收上传组件传过来的值并更新附件列表数据
	   * 获取附件列表（测评素材）
	   */
	  async getResultsFiles(res) {
	  	  this.SubmitResultsFiles = res;
	  },
	  
  }

};
</script>

<style scoped>
	.aui-flex {
		display: flex;
		width: 93%;
		margin: 0 auto;
	}
	.aui-flex-goods {
		margin-right: .8em;
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		text-align: center;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
		border-radius: 15rpx;
	}
	.goods-title {
		width: 515rpx;
		display: -webkit-box;
		/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*设置多少行*/
		-webkit-box-orient: vertical;
		/*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
		overflow: hidden;
		/*文本会被修剪，并且剩余的部分不可见*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
		font-size: 32rpx;
	}
	.textarea-block {
		background: #f5f5f5;
		width: 93%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
		user-select: text !important;
		-webkit-user-select: text;
	}
	
	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background: none;
		line-height: 1.8;
	}
	.pictrues-box {
		width: 95%;
		margin: 0 auto;
	}
</style>